<template> <div class="page-container">
  <div class="common-content">
  <!-- 列表搜索条件部分 label宽度要固定,优先展示输入框和下拉框 ;时间选择和地区选择放置在最后,因为后两个的尺寸表较大,换行后会导致整体对不齐 -->
   <div class="search-wrap">
      <!-- 表格数据部分 -->
 <div class="tab-container">
      <el-tabs v-model="dispose">
        <el-tab-pane
          v-for="item in tabMapOptions"
          :key="item.key"
          :label="item.label"
          :name="item.key"
        >
          <keep-alive>
            <tab-pane
              v-if="dispose==item.key"
              :type="item.key"
              ref="child"
            />
          </keep-alive>
        </el-tab-pane>
      </el-tabs>
            <div class="table-wrap">
       <jic-table
          :height="350"
          :operationWidth=300
          :tableList="tableList"
          :tableHeaderList="tableHeaderList"
          :totalSize="totalSize"
          :showDetailOperation="true"
          :showEditOperation="true"
          :showBatchDelete=false
          :showSelection=false
          :showIndex=false
          :showDeleteOperation=false
          @findPage="findPage"
          @handleDetail="handleDetail"
          @handleEdit="handleEdit"
          @handleSizeChange="handleSizeChange"
          @handlePageChange="handlePageChange"
          ref="jicTable"
        ></jic-table>
      </div>

    </div>
   </div>

   </div>
</div>
</template>
<script>
//一.导包区
import jicTable from "@/components/jicComponentGallery/jicTable2";

//二.数据输出区
export default {
  //===== 注册组件 =====
  components: {
    jicTable
  },

  //===== 数据初始化区=====
  data() {
    return {
      //===== 公共数据初始化 =====
      pageIndex: 0, //当前页数：首页；
      pageSize: 10, //每页记录数：10条记录；
      totalSize: 0, //总记录数：返回数据总条数
      pageRequest: { pageNum: 1, pageSize: 10 }, // 请求数据的参数
      tableList: [
        {
          promotionId:"111",
          promotionName:"111",
          activityTime:"111",
          promotionType:"1",
          promotionState:"2",
          warning:"111",
          budget:"111",
          marketingCosts:"111",
          marketingCostsProportion:"111",

        }
      ], // 表格列表数据
      searchSize: "mini",
      dispose: "1",

      //=====表格表头数据=====
      tableHeaderList: [
        {
          prop: "promotionId",
          label: "活动id",
          minWidth: 100,
          formatter: null
        },
        {
          prop: "promotionName",
          label: "活动名称",
          minWidth: 100,
          formatter: null
        },
        {
          prop: "activityTime",
          label: "活动时间",
          minWidth: 100,
          formatter: null
        },
        {
          prop: "promotionType",
          label: "活动类型",
          minWidth: 100,
          formatter: function(row, column, sts, index) {
            if (sts == 1) {
              return "减价";
            } else if (sts == 2) {
              return "折扣";
            } else {
              return "-";
            }
          }
        },
        {
          prop: "promotionState",
          label: "活动状态",
          minWidth: 100,
          formatter: function(row, column, sts, index) {
            if (sts == 1) {
              return "未开始";
            } else if (sts == 2) {
              return "进行中";
            } else if (sts == 3) {
              return "已结束";
            } else {
              return "-";
            }
          }
        },
        {
          prop: "budget",
          label: "平台营销费用预算 ",
          minWidth: 100,
          formatter: null
        },
        { prop: "warning", label: "预警比例", minWidth: 100, formatter: null },
        {
          prop: "marketingCosts",
          label: "活动已用金额",
          minWidth: 100,
          formatter: null
        },
        {
          prop: "marketingCostsProportion",
          label: "已用营销费用占比",
          minWidth: 100,
          formatter: null
        }
      ],
      tabMapOptions: [
        { label: "预警待处理", key: "1" },
        { label: "已处理", key: "2" }
      ],

      //=====搜索表单对应的数据对象初始化=====
      searchFilters: {
        id: null,
        promotionId: null,
        promotionCode: null,
        promotionName: null,
        activityStartTime: null,
        activityEntTime: null,
        promotionType: null,
        promotionState: null,
        budget: null,
        warning: null,
        creator: null,
        updater: null,
        createTime: null,
        updateTime: null,
        deleteFlag: null,
        deptId: null,
        dispose: null
      }
      //dialogVisible: false, //// 是否显示弹窗内容;
      //editDialogVisible1: false,//// 是否可编辑弹窗内容;
      //editLoading: false,////是否显示加载时动画效果;
    };
  },

  //===== 初始化页面调用方法(dom元素绑定后再执行初始化数据操作) =====
  mounted() {
    this.findPage();
  },

  watch: {
    dispose(newVal, ObjVal) {
      if (ObjVal != null || ObjVal != undefined) {
        this.findPage();
      }
    }
  },

  //=====Vue.js 方法区=====
  methods: {
    //1.查询按钮：查询列表数据
    findPage(pageNum) {
      // 传过滤器的参数
      let this_ = this;
      if (this_.searchFilters === undefined || this_.searchFilters === null) {
        this_.searchFilters = {};
      }
      this_.searchFilters.pageNum =
        pageNum === null || pageNum === undefined
          ? this.pageRequest.pageNum
          : pageNum;
      this_.searchFilters.pageSize = this.pageRequest.pageSize;
      this_.searchFilters.dispose = this_.dispose;
      this.utils.request.findPromotionWarningPage(this_.searchFilters, function(res) {
        /*if (res.code === "0000") {
          this_.tableList = res.data.list;
          this_.totalSize = Number(res.data.total);
          for (let i = 0; i < this_.tableList.length; i++) {
            this_.tableList[i].activityTime =
              this_.tableList[i].activityStartTime +
              "-" +
              this_.tableList[i].activityEntTime;
            this_.tableList[i].marketingCostsProportion =
              (this_.tableList[i].marketingCosts / this_.tableList[i].budget) *
              100;
            this_.tableList[i].marketingCostsProportion =
              this_.tableList[i].marketingCostsProportion + "%";
          }
        } else {
          this_.tableList = [];
          this_.totalSize = 0;
        }*/
      });
    },

    // 2.重置按钮：无条件查询搜索框条件
    resetForm(formName) {
      this.searchFilters = {};
      this.findPage(null);
    },

    // 3.详情按钮对应的方法
    handleDetail(params) {
      this.$router.push({
        path: "/PromotionWarningDetail/",
        query: { id: params.row.id, disabled: true }
      });
    },

    // 4.编辑按钮对应的方法
    handleEdit(params) {
      let value = {};
      value.id = params.id;
      value.dispose = params.dispose;
      let that = this;
      this.utils.request.updatePromotionWarning(value, function(res) {
        if (res.code == "0000") {
          that.$message({ message: "关闭成功", type: "success" });
        } else {
          that.$message({ message: "关闭失败", type: "warning" });
        }
      });
    },

    // 5.跳转到新增记录页面；
    addForm(params) {
      params = { row: { id: null } };
      this.$router.push({
        path: "/PromotionWarningDetail/",
        query: { id: params.row.id, disabled: false }
      });
    },
    // 6.每页记录数发生变化
    handleSizeChange(params) {
      this.pageRequest.pageSize = params.size;
    },

    // 7.请求页数发生变化
    handlePageChange(params) {
      this.pageRequest.pageNum = params.number;
      this.findPage();
    },
    // 8.页面弹窗处理方法
    add() {
      this.dialogVisible = true;
    },

    // 9.关闭弹窗
    handleClose() {
      this.dialogVisible = false;
    },

    // 10.删除按钮：删除选中的记录
    handleDelete(data) {
      this.utils.request.deletePromotionWarning({ id: data.row.id }, res => {
        if (res.data) {
          this.$message({ message: "删除成功", type: "success" });
          this.findPage();
        } else {
          this.$message({ message: "删除失败", type: "warning" });
        }
      });
    }
    //==========Vue.js自定义方法区==========
  }
};
</script>
<style lang="scss" scoped>
/* ele组件样式重置 */
.common-content {
  padding: 10px;
  box-sizing: border-box;

  .search-wrap /deep/ {
    .el-form-item__label {
      height: 32px;
      line-height: 32px;
    }

    .el-form-item__content {
      height: 32px;
      line-height: 32px;
      width: 150px;
    }

    .el-input--mini .el-input__inner {
      height: 32px;
      line-height: 32px;
    }

    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 150px;
    }
  }

  /* 多日期样式重置 */
  .el-dater /deep/ .el-form-item__content {
    width: 330px;
  }

  /* 通用工具部分样式 */
  .tool-wrap {
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;

    .left-area {
      float: left;
      width: 50%;
      text-align: left;

      button {
        margin-right: 15px;
        border-radius: 5px;
      }
    }

    .right-area {
      float: right;
      width: 50%;
      text-align: right;
    }
  }

  /* 表格部分样式 */
  .table-wrap {
    width: 100%;
    max-height: 600px;
    margin-top: 20px;
  }

  /* 弹窗样式 */
  .dialog-wrap /deep/ .el-dialog__footer {
    text-align: center !important;
  }
}
</style>
